<template>
  <div class="category">
    <top-nav title="商品分类" tnName=""></top-nav>
    <van-row>
      <van-col span="6">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item v-for="c in clist" :key="c.id" :title="c.cname" />
        </van-sidebar>
      </van-col>
      <van-col span="18">
        <van-grid :column-num="3">
          <van-grid-item v-for="z in zlist" :key="z.id" icon="photo-o" :text="z.cname" />
        </van-grid>
      </van-col>
    </van-row>
  </div>
</template>

<script>
  import TopNav from '@/components/TopNav.vue';
  export default {
    data() {
      return {
        activeKey: 0,
        clist: [],
        zlist: []
      };
    },
    components: {
      TopNav,
    },
    methods: {
      onChange(index) {
        var a = index + 1
        this.axios.get('/rlg/category/gz?fid=' + a)
          .then((response) => {
            // 把用户信息保存起来
            if (response.data.code == 200) {
              // 把获取到的数据赋值给plist
              this.zlist = response.data.data
            } else {
              //失败弹出弹框
            }
          })
      },
    },
    created() {
      this.axios.get('/rlg/category/gz?fid=0')
        .then((response) => {
          // 把用户信息保存起来
          if (response.data.code == 200) {
            // 把获取到的数据赋值给plist
            this.clist = response.data.data
          } else {
            //失败弹出弹框
          }
        });

      this.axios.get('/rlg/category/gz?fid=1')
        .then((response) => {
          // 把用户信息保存起来
          if (response.data.code == 200) {
            // 把获取到的数据赋值给plist
            this.zlist = response.data.data
          } else {
            //失败弹出弹框
          }
        })
    }
  };
</script>

<style>
</style>
